<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <script type="text/javascript" src="/static/jquery-2.1.1.min.js"></script>
    <style>
        p{
            margin-block-start: 0;
            margin-block-end: 0;
        }
    </style>
</head>
<body style="background-color: #999999;">
<div class="main-body" style="background-color: #fff;width: 1000px;height: 95vh;overflow-y: scroll;margin: 20px auto;padding: 20px">
</div>
<script>
    let main = $(".main-body");
    get_message()
    setInterval(get_message, 2000)

    function get_message() {
        $.ajax({
            url: "/message",
            type: "get",
            contentType: "application/json",
            async: true,
            success: (res)=>{
                console.log(res);
                if(res.code ===200) {
                    res.data.forEach(function (item, idx) {
                        let elem = $(`<p style="font-size: 12px;height: 16px;line-height: 16px ">${item.message}</p>`)
                        if (item.level === "INFO") {
                            elem.css("color", "#11B45BFF")
                        } else if (item.level === "ERROR") {
                            elem.css("color", "#ef2309")
                        } else {
                            elem.css("color", "#f1a506")
                        }
                        main.append(elem)
                    })
                }
            }
        })
    }

</script>
</body>
</html>